* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  color: #333;
  font-family: PingFangSC-Regular, PingFang SC;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

.flex {
  display: flex;
}

.flex-row {
  display: -webkit-flex;
  /* Safari */
  display: flex;
}

.flex-column {
  display: -webkit-flex;
  /* Safari */
  display: flex;
  flex-direction: column;
}

.flex-main-center {
  justify-content: center;
}
.flex-main-start {
  justify-content: flex-start;
}
.flex-main-between {
  /*两端对齐*/
  justify-content: space-between;
}

.flex-main-around {
  justify-content: space-around;
}

.flex-main-end {
  justify-content: flex-end;
}

.flex-cross-center {
  align-items: center;
}

.flex-cross-end {
  align-items: flex-end;
}

.flex-cross-between {
  align-items: space-between;
}

.flex-content-around {
  align-content: space-around;
}

.align-end {
  align-self: flex-end;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-grow {
  flex-grow: 1;
  /* default 0   1代表占据剩余空间 */
}

.flex-shrink {
  flex-shrink: 0;
  /* default 1   如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 */
}
.ell2 {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 这里是超出几行省略 */
  overflow: hidden;
}
.ell1 {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* 这里是超出几行省略 */
  overflow: hidden;
}
.ell3 {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 这里是超出几行省略 */
  overflow: hidden;
}
